<template>
  <div class="container">
    <!--筛选结果-->
    <ul class="filter-box">
      <li>筛选结果</li>
      <li @mouseenter="showLevelFirstBox=true" @mouseleave="showLevelFirstBox=false">
        <i class="bg right_icon"></i>
        <span class="content" v-if="initParams && initParams.levelOneItem">
          一级：{{yjname || initParams.levelOneItem.name}}
          <i class="bg down"></i>
          <span v-if="showLevelFirstBox" class="triangle_icon"></span>
        </span>
        <div v-if="showLevelFirstBox" class="select_outBox">
          <div class="select_box flexbox">
            <ul class="left flex1">
              <li
                v-for="(item, index) in categories"
                :key="item.id"
                :class="{active: index === 0}"
                @click="setCategory('level1', item.id,index,item.name)"
              >
                <b>{{item.name}}</b>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li @mouseenter="showLevelSecondBox=true" @mouseleave="showLevelSecondBox=false">
        <i class="bg right_icon"></i>
        <span class="content" v-if="initParams && initParams.levelSecondItem">
          二级：{{ejname || initParams.levelSecondItem.name}}
          <i class="bg down"></i>
          <span v-if="showLevelSecondBox" class="triangle_icon"></span>
        </span>
        <div v-if="showLevelSecondBox" class="select_outBox">
          <div class="select_box flexbox">
            <ul class="left flex1" v-if="ertype == 1">
              <li
                v-for="(item, index) in initParams.levelOneItem.children"
                :key="item.id"
                :class="{active: index === 0}"
                @click="setCategory('level2', item.id,index,item.name)"
              >
                <b>{{item.name}}</b>
              </li>
              <!-- categories[yjindex].children -->
            </ul>
            <ul class="left flex1" v-else-if="ertype == 2">
              <li
                v-for="(item, index) in categories[yjindex].children"
                :key="item.id"
                :class="{active: index === 0}"
                @click="setCategory('level2', item.id,index,item.name)"
              >
                <b>{{item.name}}</b>
              </li>
              <!--  -->
            </ul>
          </div>
        </div>
      </li>
      <li @mouseenter="showLevelThirdBox=true" @mouseleave="showLevelThirdBox=false">
        <i class="bg right_icon"></i>
        <span class="content" v-if="initParams && initParams.levelThirdItem">
          品类：{{sjname || initParams.levelThirdItem.name}}
          <i class="bg down"></i>
          <span v-if="showLevelThirdBox" class="triangle_icon"></span>
        </span>
        <div v-if="showLevelThirdBox" class="select_outBox">
          <div class="select_box flexbox">
            <ul class="left flex1" v-if="ertype == 1">
              <li
                v-for="(item, index) in initParams.levelSecondItem.children"
                :key="item.id"
                :class="{active: index === 0}"
                @click="setCategory('level3', item.id,index,item.name)"
              >
                <b>{{item.name}}</b>
              </li>
            </ul>
            <ul class="left flex1" v-else-if="ertype == 2">
              <li
                v-for="(item, index) in categories[yjindex].children[ejindex].children"
                :key="item.id"
                :class="{active: index === 0}"
                @click="setCategory('level3', item.id,index,item.name)"
              >
                <b>{{item.name}}</b>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li v-if="selectBrand.length">
        <i class="bg right_icon"></i>
        <span class="content">品牌：{{selectBrand.join(',')}}</span>
      </li>
      <li v-if="selectSeries.length">
        <i class="bg right_icon"></i>
        <span class="content">系列：{{selectSeries.join(',')}}</span>
      </li>
      <li v-if="params.parameters">
        <i class="bg right_icon"></i>
        <span class="content">参数：{{params.parameters}}</span>
      </li>
      <li class="clear" @click="eliminateTj">清除筛选条件</li>
    </ul>
    <!--品牌-->
    <div class="chooseBox flexbox">
      <div class="left left_fx">品牌</div>
      <ul class="flex1 right checkBox flexbox flex-wrap" style="line-height: 20px;">
        <el-checkbox-group v-model="brandList">
          <div v-for="(item,index) in categoryBrands" :key="index" class="checkbox-item">
            <el-checkbox
              v-if="index<=7 || (index>7 && bandUp)"
              :label="item.id"
              :value="item.id"
            >{{item.name}}</el-checkbox>
          </div>
        </el-checkbox-group>
      </ul>
      <div class="an flexbox align-items justify brandsan" @click="brandOpen">
        <div style="margin-top: 5px;">
          <span>
            展
            <br />开
          </span>
          <i :class="{'packUp': bandUp}"></i>
        </div>
      </div>
    </div>
    <!--系列-->
    <div class="chooseBox flexbox">
      <div class="left left_fx">系列</div>
      <ul class="flex1 right checkBox flexbox flex-wrap" style="line-height: 20px;">
        <el-checkbox-group v-model="seriesList">
          <div v-for="(item,index) in series" :key="index" class="checkbox-item">
            <el-checkbox v-if="index<=7 || (index>7 && seriesUp)" :label="item.id">{{item.name}}</el-checkbox>
          </div>
        </el-checkbox-group>
      </ul>
      <div class="an flexbox align-items justify brandsan" @click="seriesUpdOpen">
        <div>
          <span>
            展
            <br />开
          </span>
          <i :class="{'packUp': seriesUp}"></i>
        </div>
      </div>
    </div>

    <div class="flexbox" style="margin-top: 20px;">
      <!--产品参数筛选-->
      <div class="parameterBox" style="margin-right: 14px;">
        <h3 class="flexbox align-items justify">
          <b class="flex1">产品参数筛选</b>
          <i class="icon icon1"></i>
        </h3>
        <div class="notParameterBox" style="display: none;">
          <p>请先选择产品分类</p>
        </div>
        <div class="specs-box">
          <div v-for="item in searcherSpecsChanged" :key="item.id">
            <h4 class="titleBox flexbox align-items" @click="item.show = !item.show">
              <b class="flex1">{{item.name}}</b>
              <svg-icon
                icon-class="zankai"
                class-name="zankai"
                style="font-size: 20px;
    margin-right: 15px;"
              />
            </h4>
            <div
              v-if="item.show"
              class="checkBox flexbox align-items flex-wrap"
              style="flex-direction: column;"
            >
              <el-checkbox-group v-model="item.specsList">
                <div v-for="(v, index) in item.values" :key="v.id" class="checkbox-item">
                  <el-checkbox v-if="index <= 9 || item.showAll" :label="v.name">
                    <!-- <el-tooltip class="item" effect="dark" :content="v.name" placement="right"> -->
                    <el-button type="text">{{v.name}}</el-button>
                    <!-- </el-tooltip> -->
                  </el-checkbox>
                </div>
              </el-checkbox-group>
              <div
                v-if="item.values.length > 9"
                class="flexbox align-items allBox"
                style="display: flex;"
                @click="item.showAll = !item.showAll"
              >
                <span class="flex1 flexbox align-items justify">
                  <i class="icon icon3"></i>
                  <b v-if="!item.showAll">查看全部</b>
                  <b v-if="item.showAll">收起</b>
                </span>
                <i class="icon icon4"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--列表-->
      <div style="box-sizing:border-box;" class="flex1">
        <!-- 筛选条-->
        <div class="status-menu f14">
          <ul class="left-box">
            <li @click="priceSorting">
              <span>市场价</span>
              <i class="sort" :class="priceColor?'':priceTyep?'sort-down':'sort-up'"></i>
            </li>
            <li @click="type='list'" :class="{current: type==='list'}">
              <span>列表</span>
              <i :class="[ type === 'card' ? 'list-type-b': 'list-type-a' ]"></i>
            </li>
            <li @click="type='card'" :class="{current: type==='card'}">
              <span>大图</span>
              <i :class="[ type === 'card' ? 'list-sm-a': 'list-sm-b' ]"></i>
            </li>
          </ul>
          <div class="right-box">
            <div>
              共
              <span class="num" id="eleProductCount">{{pageData.total}}</span>件商品
            </div>
            <div class="page">
              <span style="color: red;" id="elePageIndex">{{pageData.current_page}}</span>/
              <span id="elePageCount">{{pageData.last_page}}</span>
              <div class="button">
                <a
                  href="#"
                  id="elePrePage"
                  @click="prePage"
                  :class="{disable: this.params.page < 1}"
                >&lt;</a>
                <a href="#" @click="nextPage">&gt;</a>
              </div>
            </div>
          </div>
        </div>
        <div class="more-box">
          <div class="right">
            <span class="icon-cart" :class="{'cart_empty' : !hasAmount}" @click="addCart">
              <i></i>
              <label>添加购物车</label>
            </span>
          </div>
          <div style="clear:both;"></div>
        </div>

        <!--表格列表模式-->
        <div v-if="type==='list'" style="margin-top:20px;" id="eleProductList1">
          <table class="product-table">
            <tbody>
              <tr>
                <th width="320">产品</th>
                <th width="80">市场价</th>
                <th width="80">会员价</th>
                <th width="100">数量</th>
              </tr>
              <tr v-for="item in products" :key="item.id">
                <td>
                  <div class="pic-box">
                    <router-link :to="`/detail/${item.id}`" target="_blank">
                      <img :src="item.image" />
                    </router-link>
                  </div>
                  <div class="detail-box">
                    <ul>
                      <li>
                        <span
                          class="brand"
                          :style="'border:1px solid '+item.brand.color+';color:'+item.brand.color"
                        >{{item.brand_name}}</span>
                        <router-link
                          :to="`/detail/${item.id}`"
                          target="_blank"
                        >{{item.series_name}} {{item.model_name}}</router-link>
                      </li>
                      <li v-if="item.parameters">
                        <span class="spec">
                          <span style="color:#333">参</span>
                          <span style="color:#333;margin-left: 13px;">数:</span>
                          {{Object.values(item.parameters).join('&emsp;|&emsp;')}}
                        </span>
                        <!-- <el-tooltip v-if="item.parameters" class="item" effect="dark" :content="Object.values(item.parameters).join('&emsp;|&emsp;')" placement="top">

                        </el-tooltip>-->
                      </li>
                      <li>
                        <label>
                          <span style="color:#333">型</span>
                          <span style="color:#333;margin-left: 14px;">号：</span>
                        </label>
                        <span class="stext">{{item.model_name}}</span>
                      </li>
                      <li>
                        <label>订货号：</label>
                        <span class="stext">{{item.part_number}}</span>
                      </li>
                    </ul>
                  </div>
                </td>
                <td class="font-979797" style="text-decoration:line-through">¥{{item.price}}</td>
                <td
                  style="color: red;"
                >¥{{item.discount_price}}</td>
                <td>
                  <div class="num-box">
                    <el-input-number
                      v-model="item.amount"
                      @change="amountChange"
                      :min="0"
                      :max="100"
                    ></el-input-number>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 列表模式结束-->
        <!--大图模式-->
        <div v-if="type==='card'" class="b-wrap-list" style id="elePicData">
          <div v-for="item in products" :key="item.id" class="pro-box">
            <div class="pic">
              <router-link :to="`/detail/${item.id}`" target="_blank">
                <img :src="item.image" />
              </router-link>
            </div>
            <ul class="detail">
              <li>
                <span class="spec" style="margin:8px 0">{{item.title}}</span>
              </li>
              <li v-if="item.parameters" style="margin:8px 0">
                <span class="spec">
                  <span style="color:#333">参</span>
                  <span style="color:#333;margin-left: 13px;">数:</span>
                  {{Object.values(item.parameters).join('&emsp;|&emsp;')}}
                </span>
                <!-- <el-tooltip v-if="item.parameters" class="item" effect="dark" :content="Object.values(item.parameters).join('&emsp;|&emsp;')" placement="top">

                </el-tooltip>-->
              </li>
              <li style="margin:8px 0">
                <label>型&nbsp;&nbsp;&nbsp;号：</label>
                <span class="stext" title="5SY4150-6CC(B50 1P)">{{item.model_name}}</span>
              </li>
              <li style="margin:10px 0">
                <label>订货号：</label>
                <span class="stext" title="5SY41506CC">{{item.part_number}}</span>
              </li>
              <li style="margin:10px 0">
                <span class="dis-price">¥{{item.discount_price}}</span>
                <span class="price">¥{{item.price}}</span>
              </li>
            </ul>
            <div class="botom">
              <div style="display: flex;">
                <svg-icon
                  icon-class="gowuche"
                  class-name="gowuche"
                  onclick="addItemCart(14322, this)"
                  style="font-size: 25px;margin-top: 1px;"
                />
                <!-- <i class="cart"></i> -->
                <div class="cart-num-edit">
                  <el-input-number v-model="item.amount" @change="amountChange" :min="0" :max="100"></el-input-number>
                </div>
                <a href="#" class="clear-text" onclick="clearCartNum(this,14322)">清空</a>
              </div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
        <div style="text-align:right; margin-top:20px;">
          <span class="icon-cart" :class="{'cart_empty' : !hasAmount}" @click="addCart">
            <i></i>
            <label>添加购物车</label>
          </span>
        </div>

        <!--分页-->
        <div class="page-wrap">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next, jumper"
            :page-size="pageData.per_page"
            :page-count="pageData.last_page>10?10:pageData.last_page"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { products } from '@/api/goods'
import { addCartMulti } from '@/api/cart'
import { categoryParameter, getCategoryBrands } from '@/api/category'
export default {
  name: 'ProductSelect',
  metaInfo: {
    title: '产品选型',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      showLevelFirstBox: false,
      showLevelSecondBox: false,
      showLevelThirdBox: false,
      bandUp: false,
      seriesUp: false,
      brandList: [],
      seriesList: [],
      series: [],
      searcherSpecsChanged: [],
      products: [],
      type: 'list',
      hasAmount: false,
      pageData: {},
      categoryBrands: [],
      ertype: '1',
      // category_id: '1003',
      parameters: '',
      initParams: {},
      selectBrand: [],
      selectSeries: [],
      ejindex: 0,
      yjindex: 0,
      yjname: '',
      ejname: '',
      sjname: '',
      params: {
        page: '1', // 分页
        category_id: '', // 分类id
        brand_id: '', // 品牌id
        search: '', // title 模糊匹配
        label: '', // 热门商品
        series_id: '', // 系列id
        parameters: '', // parameters,
        business_id:''//店铺id
      },
      flbrandId: '',
      stype: 1,
      priceTyep: true,
      priceColor: true
    }
  },
  computed: {
    ...mapGetters(['categories'])
  },
  created () {
    const categoryId = this.$route.query.id
    console.log(categoryId)
    const seriesId = this.$route.query.series
    const searchName = this.$route.query.search
    this.yjindex = this.$route.query.index
    this.ejindex = this.$route.query.bindex
    this.stype = this.$route.query.type
    // console.log(categoryId+'sdjadjasldkajdlaj')
    if (categoryId) {
      this.params.category_id = categoryId
      this.flbrandId = categoryId
      this.params.series_id = seriesId
      this.params.search = searchName
      this.initParams = this.searchLevel(categoryId)
      console.log(this.initParams)
    } else {
      // if(this.stype == '2'){
      //   console.log('搜索页面进入')
      //   this.params.search = searchName
      // }else{
      this.initParams = this.initCategory()
      if (this.stype == 1) {
        this.params.category_id = this.initParams.levelThirdItem.id
      }
      this.flbrandId = this.initParams.levelThirdItem.id
      this.params.series_id = seriesId
      this.params.search = searchName
      // }
    }
    console.log(this.initParams)
    // if(seriesId){
    //   this.params.category_id = ''
    // }
    this.fetchProducts()
    this.fetchParams()
    this.fetchCategoryBrands()
    // console.log(this.params.search)
    // console.log('=======================')
    // this.fetchGoodsNa(this.params.search)
  },
  watch: {
    brandList (values) {
      const selectBrand = []
      const series = []
      this.categoryBrands.forEach(item => {
        values.forEach(v => {
          if (v === item.id) {
            selectBrand.push(item.name)
            series.push(...item.series)
          }
        })
      })
      this.series = series
      this.params.brand_id = values.join(',')
      this.fetchProducts()
      this.selectBrand = selectBrand
      console.log('监听品牌变化')
      console.log(this.brandList)
      if (this.brandList.length === 1) {
        if (this.stype == 1) {
          console.log('没有');
          (this.params.series_id = ''),
          (this.seriesList = []),
          (this.stype = 2)
        }
      }
    },
    searcherSpecsChanged: {
      handler (values) {
        const map = {}
        values.forEach(item => {
          if (item.specsList.length) {
            map[item.name] = item.specsList.join(',')
          }
        })
        // 参数筛选 （框架电流:1600A;分断能力:66KA;极数:3P;） 用分号";"隔离 多个参数 用冒号":" 隔离参数名与参数值
        const parameters = []
        for (const [key, value] of Object.entries(map)) {
          parameters.push(`${key}:${value}`)
        }
        this.params.parameters = parameters.join(';')
        this.fetchProducts()
      },
      deep: true
    },
    seriesList (val) {
      if (val.length) {
        const selectSeries = []
        this.series.forEach(item => {
          val.forEach(v => {
            if (item.id === v) {
              selectSeries.push(item.name)
            }
          })
        })
        this.selectSeries = selectSeries
        this.params.series_id = val.join(',')
        this.fetchProducts()
      }
    }
  },
  mounted () {
    this.setHasNav(false)
  },
  methods: {
    ...mapActions({
      fetchCartAmount: 'cart/fetchCarts',
      fetchGoodsNa: 'cart/getGames'
    }),
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    searchLevel (id) {
      let levelOneItem = ''
      let levelSecondItem = ''
      let levelThirdItem = ''
      this.categories.forEach(item => {
        item.children.forEach(level2 => {
          if (level2.id == Number(id)) {
            levelOneItem = item
            levelSecondItem = level2
            levelThirdItem = level2.children[0]
          } else {
            level2.children.forEach(level3 => {
              if (level3.id == Number(id)) {
                levelOneItem = item
                levelSecondItem = level2
                levelThirdItem = level3
              }
            })
          }
        })
      })
      return {
        levelOneItem,
        levelSecondItem,
        levelThirdItem
      }
    },
    initCategory () {
      let levelOneItem = ''
      let levelSecondItem = ''
      let levelThirdItem = ''
      if (this.categories.length) {
        levelOneItem = this.categories[0]
        if (levelOneItem.children.length) {
          levelSecondItem = levelOneItem.children[0]
          if (levelSecondItem.children.length) {
            levelThirdItem = levelSecondItem.children[0]
          }
        }
      }
      return {
        levelOneItem,
        levelSecondItem,
        levelThirdItem
      }
    },
    // 品牌展开
    brandOpen () {
      this.bandUp = !this.bandUp
    },
    async fetchProducts () {
      const res = await products(this.params)
      console.log(res.filters.search)
      this.fetchGoodsNa(res.filters.search)
      this.products = res.data.map(item => {
        item.amount = 0
        return item
      })
      this.pageData = res.meta
      console.log(this.pageData)
    },
    // 系列展开
    seriesUpdOpen () {
      this.seriesUp = !this.seriesUp
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.fetchProducts()
    },
    // 上一页
    prePage () {
      this.params.page--
      if (this.params.page < 1) {
        return
      }
      this.fetchProducts()
    },
    // 下一页
    nextPage () {
      this.params.page++
      this.fetchProducts()
    },
    // 改变商品的数量
    amountChange (val) {
      this.hasAmount = val > 0
    },
    async addCart () {
      const goods = []
      const products = this.products.filter(item => item.amount > 0)
      products.forEach(item => {
        goods.push({
          product_id: item.id,
          amount: item.amount
        })
      })
      if (!goods.length) {
        this.$message.warning('请输入数量！')
        return
      }
      try {
        await addCartMulti({ items: goods })
        this.$message.success('添加购物车成功！')
        this.products.forEach(item => {
          item.amount = 0
        })
        this.fetchCartAmount()
      } catch (e) {
        console.log(e)
      }
    },
    async fetchParams () {
      const res = await categoryParameter({
        category_id: this.flbrandId
      })
      this.searcherSpecsChanged = res.map(item => {
        item.showAll = false
        item.show = true
        item.specsList = []
        return item
      })
    },
    async fetchCategoryBrands () {
      const res = await getCategoryBrands({
        category_id: this.flbrandId
      })
      if (res.data) {
        this.categoryBrands = res.data
        this.series = res.data.length ? res.data[0].series : []
      }
    },
    // 设置系列
    setCategory (level, id, index, name) {
      if (this.stype == '2') {
        this.params.search = ''
      }
      if (level === 'level1') {
        (this.params.brand_id = ''),
        (this.params.series_id = ''),
        (this.selectSeries = '');
        (this.seriesList = []),
        (this.brandList = []),
        (this.selectBrand = ''),
        (this.params.parameters = '')
        for (const i of this.searcherSpecsChanged) {
          i.specsList = ''
        }
        this.yjindex = index
        this.ejindex = 0
        this.yjname = name
        this.ertype = 2
        this.ejname = this.categories[this.yjindex].children[0].name
        this.sjname = this.categories[
          this.yjindex
        ].children[0].children[0].name
        this.params.category_id = this.categories[
          index
        ].children[0].children[0].id
        this.flbrandId = this.categories[index].children[0].children[0].id
        this.fetchParams()

        this.categories.forEach(item => {
          if (item.id === id) {
            this.initParams.levelSecondItem = item
            this.initParams.levelThirdItem = item.children[0]
            this.sjname = this.categories[
              this.yjindex
            ].children[0].children[0].name
          }
        })
        console.log(this.initParams.levelSecondItem.children)
        console.log('------------------------')
      } else if (level === 'level2') {
        (this.params.brand_id = ''),
        (this.params.series_id = ''),
        (this.selectSeries = '');
        (this.seriesList = []),
        (this.brandList = []),
        (this.selectBrand = ''),
        (this.params.parameters = '')
        this.ejindex = index
        this.ejname = name
        this.params.category_id = this.categories[this.yjindex].children[
          this.ejindex
        ].children[0].id
        this.flbrandId = this.categories[this.yjindex].children[
          this.ejindex
        ].children[0].id
        this.sjname = this.categories[this.yjindex].children[
          this.ejindex
        ].children[0].name

        this.initParams.levelOneItem.children.forEach(item => {
          if (item.id === id) {
            this.initParams.levelSecondItem = item
            this.initParams.levelThirdItem = item.children[0]
          }
        })
      } else if (level === 'level3') {
        (this.params.brand_id = ''),
        (this.params.series_id = ''),
        (this.selectSeries = '');
        (this.seriesList = []),
        (this.brandList = []),
        (this.selectBrand = ''),
        (this.params.parameters = '')
        this.params.category_id = id
        this.flbrandId = id
        this.fetchParams()
        this.sjname = name
        console.log(name)
      }
      // this.params.category_id = id
      this.fetchCategoryBrands()
      this.fetchParams()
      this.fetchProducts()
    },
    eliminateTj () {
      (this.params.brand_id = ''),
      (this.params.series_id = ''),
      (this.selectSeries = '');
      (this.seriesList = []),
      (this.brandList = []),
      (this.selectBrand = ''),
      (this.params.parameters = '')
      for (const i of this.searcherSpecsChanged) {
        i.specsList = ''
      }
      this.fetchProducts()
    },
    // 价格排序
    async priceSorting () {
      this.priceColor = false
      if (this.priceTyep) {
        await this.products.sort((pre, cur) => Number(pre.price) - Number(cur.price))
      } else {
        await this.products.sort((pre, cur) => Number(cur.price) - Number(pre.price))
      }
      this.priceTyep = !this.priceTyep
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 10px;
  margin-bottom: 90px;
}
.filter-box {
  background: #f6f6f6;
  margin-bottom: 10px;
  height: 25px;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;

  > li {
    position: relative;

    &:first-child {
      width: 130px;
      text-align: center;
    }
  }

  .bg {
    background-image: url(~@/assets/img/search_filter_icon.png);
    background-repeat: no-repeat;
    display: inline-block;
  }

  .right_icon {
    width: 5px;
    height: 10px;
    background-position: -47px 0px;
    margin: 0 10px;
  }

  .down {
    width: 10px;
    height: 12px;
    background-position: -90px 2px;
    margin: 0 0 0 5px;
  }

  .content {
    background: red;
    color: #fff;
    padding: 5px 10px 4px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 1000;
  }

  .clear {
    background: #fff;
    border: 1px solid #bfbfbf;
    padding: 3px 5px;
    font-size: 12px;
    margin-left: auto;
    cursor: pointer;
  }
}

.checkBox {
  /deep/ .el-checkbox-group {
    width: 100%;
    .checkbox-item {
      display: inline-block;
    }
    text-align: left;
    .el-checkbox__label {
      width: 100px;
      text-align: left;
      word-break: break-all;
      white-space: unset;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: middle;
    }
  }
}

.specs-box {
  /deep/ .el-checkbox-group {
    .el-checkbox__inner {
      z-index: 0;
    }
    .checkbox-item {
      width: 50%;
    }
    text-align: left;
    .el-checkbox {
      margin-right: unset;
      .el-button {
        width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        color: unset;
      }
    }
  }
}

.select_outBox {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}

.select_outBox * {
  margin: 0;
  padding: 0;
}

.triangle_icon {
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-bottom: 5px solid #5b5b5b;
  border-right: 5px solid transparent;
  position: absolute;
  left: 30%;
  top: 30px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.select_box {
  background-color: rgba(75, 75, 75, 0.91);
  padding: 10px 0;
  margin: 35px 0 0 30px;
  color: #fff;
  font-size: 12px;
  max-height: 500px;
  overflow: auto;
}

.select_box .left {
  border-right: 1px dashed #fff;
  height: 100%;
}

.select_box .left,
#header .select_box .right {
  padding: 0 20px;
  white-space: nowrap;
}

.select_box .left:nth-last-of-type(1) {
  border-right: 1px solid transparent;
}

.select_box .left > li,
#header .select_box .right > li {
  margin-top: 10px;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
}

.select_box .left > li:nth-last-of-type(1),
#header .select_box .right > li:nth-last-of-type(1) {
  margin-bottom: 10px;
}

.select_box .left > li:hover {
  color: red;
}

.select_box .active {
  color: red;
  text-decoration: underline;
}

.select_box .active2 {
  background: red !important;
}

.select_box .accessory1,
#header .select_box .accessory2 {
  display: inline-block;
  color: #fff;
  padding: 3px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 100%;
  margin-left: 10px;
}

.select_box .accessory1 {
  background: red;
}

.select_box .accessory2 {
  border: 1px solid #fff;
}

.select_nocheck {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  background-position: -1px 0;
  margin-top: 2px;
  vertical-align: text-top;
}

.select_check {
  background-position: -1px -26px;
}

.chooseBox {
  border: 1px solid #dedede;
}

.chooseBox:nth-last-of-type(1) {
  border-bottom: 1px solid #dedede;
}

.chooseBox:nth-of-type(2) {
  border-top: none;
}

.chooseBox .left {
  text-align: center;
  margin: 15px 0;
  width: 105px;
}

.chooseBox .right {
  border-left: 1px solid #dedede;
  background: #fff;
  padding: 12px 25px 12px;
}

.chooseBox .right .item li {
  padding: 5px 20px;
  border: 1px solid transparent;
  cursor: pointer;
}

.chooseBox .right .active {
  border: 1px solid #4448f8 !important;
  border-bottom: 1px solid #fff !important;
  position: relative;
  z-index: 0;
  color: #4448f8;
}

.chooseBox .an {
  width: 25px;
  color: #fff;
  background: #4448f8;
  cursor: pointer;
}
.chooseBox .an i {
  display: block;
  width: 10px;
  height: 10px;
  background: url(~@/assets/img/search_bottom.png) no-repeat;
  background-size: 100% auto;
  margin-top: 5px;
}
.chooseBox .packUp,
.parameterBox .packUp {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.parameterBox {
  width: 265px;
  border: 1px solid #dedede;
}
.parameterBox h3 {
  height: 35px;
  color: #fff;
  background: #4448f8;
  border-bottom: 1px solid #dedede;
  cursor: pointer;
}
.parameterBox h3 b {
  font-size: 14px;
  text-align: center;
  display: block;
}
.parameterBox .notParameterBox {
  border-top: 1px solid #dedede;
  background: url(/images/search/no_search_parameter.png) no-repeat;
  background-position: center 15px;
  overflow: hidden;
  height: 325px;
}
.parameterBox .notParameterBox p {
  text-align: center;
  color: #000;
  font-size: 16px;
  margin: 185px 0 0;
  line-height: 180%;
}
.parameterBox .notParameterBox p b {
  color: red;
  font-size: 25px;
}
.parameterBox .icon {
  display: block;
  background-image: url(~@/assets/img/search_parameter.png);
  background-repeat: no-repeat;
  margin-right: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.parameterBox .icon1 {
  width: 19px;
  height: 15px;
  background-image: url(~@/assets/img/search_bottom.png);
  background-size: 100% auto;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.parameterBox .icon2 {
  width: 22px;
  height: 22px;
  background-position: -144px -38px;
  transform: rotate(-90deg);
}
.parameterBox .icon3 {
  width: 11px;
  height: 9px;
  background-position: 0px -7px;
  transition: all 0.3s;
}
.parameterBox .icon4 {
  width: 21px;
  height: 21px;
  background-position: -145px 0px;
  display: none;
}
.parameterBox .rotate {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.parameterBox .titleBox {
  border-bottom: 1px solid #dedede;
  border-top: 1px solid #dedede;
  padding: 5px 0 5px 20px;
  box-sizing: border-box;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.parameterBox .checkBox {
  padding: 15px 15px 0;
  background: #f8f8f8;
  cursor: pointer;
}
.parameterBox .checkBox:nth-last-of-type(1) {
  border-bottom: 0px;
}
.parameterBox .checkBox li {
  width: 50%;
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parameterBox .allBox {
  padding: 3px 0 10px;
  cursor: pointer;
  background: #f8f8f8;
  height: 40px;
  box-sizing: border-box;
}
.parameterBox .allBox .retract {
  padding-left: 31px;
  box-sizing: border-box;
}
.parameterBox .allBox b {
  color: #777777;
}

/*搜索状态栏*/
.status-menu {
  position: relative;
  height: 36px;
  background: #ffffff;
  border: 1px solid #dedede;
}
.status-menu ul {
  display: inline-block;
}
.status-menu ul li {
  display: inline-block;
  cursor: pointer;
  color: #000;
  float: left;
  width: 65px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-right: 1px solid #dedede;
}
.status-menu ul li:hover {
  background: #d8f8f8;
}
.status-menu ul li.current {
  background: #4448f8;
  color: #fff;
}
.status-menu ul li i {
  margin-left: 3px;
  display: inline-block;
}

.status-menu ul li .sort {
  background: url(~@/assets/img/icon_sort.png) no-repeat;
  width: 7px;
  height: 13px;
}
.status-menu ul li .sort-down {
  background: url(~@/assets/img/icon_down_sort.png) no-repeat;
  width: 7px;
  height: 13px;
}
.status-menu ul li .sort-up {
  background: url(~@/assets/img/icon_up_sort.png) no-repeat;
  width: 7px;
  height: 13px;
}
.status-menu ul li .list-type-a {
  background: url(~@/assets/img/icon_list_type.png) 0 0px no-repeat;
  width: 12px;
  height: 10px;
}
.status-menu ul li .list-type-b {
  background: url(~@/assets/img/icon_list_type.png) 0 -20px no-repeat;
  width: 12px;
  height: 10px;
}
.status-menu ul li .list-sm-a {
  background: url(~@/assets/img/icon_list_sm.png) 0 0px no-repeat;
  width: 12px;
  height: 12px;
}
.status-menu ul li .list-sm-b {
  background: url(~@/assets/img/icon_list_sm.png) 0 -22px no-repeat;
  width: 12px;
  height: 12px;
}

.status-menu {
  .left-box {
    position: absolute;
    left: 0;
  }
}

.status-menu .right-box {
  position: absolute;
  right: 10px;
  top: 6px;
}
.status-menu .right-box > div {
  display: inline-block;
  margin-right: 20px;
}
.status-menu .right-box .num {
  font-size: 16px;
  margin: 0 2px;
  color: red;
}
.status-menu .right-box .page {
  display: inline-block;
}
.status-menu .right-box .button {
  display: inline-block;
  border: 1px solid #dedede;
}
.status-menu .right-box .button a:first-child {
  border-right: 1px solid #dedede;
  box-sizing: border-box;
}
.status-menu .right-box .button a:hover {
  background: #d8f8f8;
}
.status-menu .right-box .button .disable {
  background: #f1f1f1;
  cursor: default;
}
.status-menu .right-box .button .disable:hover {
  background: #f1f1f1;
  color: #000;
}
.status-menu .right-box .page a {
  display: inline-block;
  padding: 2px 12px;
  text-align: center;
  font-size: 16px;
  font-family: "宋体";
}

/*中间关键词*/
.more-box {
  margin-top: 12px;
  margin-bottom: 12px;
}
.more-box .nav_sanme {
  display: inline-block;
}
.more-box .key {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.more-box .key li {
  display: inline-block;
  margin-left: 8px;
}
.more-box .key li a {
  height: 32px;
  line-height: 32px;
  text-align: center;
  display: block;
  padding: 0px 15px;
  background: red;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.more-box .key li a:hover {
  background-color: red;
}
.more-box .right {
  float: right;
}
.more-box .right label {
  font-size: 14px;
  cursor: pointer;
}
.more-box .right .page-size {
  display: inline-block;
  margin-right: 20px;
}
.more-box .right .page-size li {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.more-box .right .page-size li:hover {
  background: #d8f8f8;
}
.more-box .right .page-size li a {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid #dedede;
  text-align: center;
  line-height: 24px;
}
.more-box .right .page-size li .current {
  background: #4448f8;
  color: #fff;
  border: none;
}

/*产品列表*/
.product-table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
}
.product-table tr th {
  text-align: center;
  height: 40px;
  background-color: #4448f8;
  color: #fff;
}
.product-table tr td:first-child {
  position: relative;
}
.product-table tr:nth-child(odd) {
  background-color: #f5f5f5;
}
.product-table tr:nth-child(even) {
  background-color: #fff;
}
.product-table tr td {
  text-align: center;
  height: 40px;
  border: 1px solid #dedede;
  height: 105px;
  padding: 0 5px;
}

/*分页*/
.page-wrap {
  text-align: center;
  margin-top: 30px;
}
.page-wrap a {
  display: inline-block;
  background: #fff;
  padding: 13px 15px;
  color: #666666;
}
.page-wrap a.disable {
  color: #ccc;
  cursor: default;
}
.page-wrap a.cur {
  background: #4448f8;
  color: #fff;
}
.page-wrap a:first-child {
  margin-right: 10px;
}
.page-wrap a:last-child {
  margin-left: 10px;
}
.page-wrap > div {
  display: inline-block;
}
.go-page {
  margin-left: 10px;
}
.go-page label {
  margin: 0 5px;
  vertical-align: middle;
}
.go-page input {
  width: 40px;
  height: 32px;
  border: 1px solid #ccc !important;
  text-align: center;
  vertical-align: middle;
}
.go-page button {
  border: 1px solid #ccc;
  height: 36px;
  width: 45px;
  background: #fff;
}

/*产品*/
.pic-box {
  float: left;
  display: inline-block;
  height: 105px;
  width: 105px;
}
.pic-box img {
  height: 85px;
  width: 85px;
  margin-top: 10px;
}
.detail-box {
  float: left;
  display: inline-block;
  margin-top: 10px;
  margin-left: 5px;
}
.detail-box ul {
  text-align: left;
  width: 250px;
}
.detail-box ul li {
  margin-top: 6px;
}
.detail-box ul li:first-child {
  margin-top: 2px;
}

.detail-box ul li label {
  display: inline-block;
  vertical-align: middle;
}
.detail-box ul li .stext {
  display: inline-block;
  vertical-align: middle;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.w-140 {
  max-width: 140px !important;
}
.brand {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 4px;
  border-radius: 2px;
  margin-right: 4px;
}
.detail-box ul li .spec {
  vertical-align: middle;
  display: inline-block;
  width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.detail-box ul li .name {
  color: #000;
  vertical-align: middle;
  line-height: 18px;
  margin-left: 3px;
  display: inline-block;
  width: 175px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.detail-box span {
  color: #979797;
}

.num-box a {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}
.num-box input {
  border: 1px solid #e6e6e6 !important;
  height: 26px;
  width: 50px;
  text-align: center;
}

/*大图列表*/
.b-wrap-list {
  margin-top: 20px;
  margin-left: -13px;
}
.b-wrap-list .pro-box {
  float: left;
  margin-left: 13px;
  position: relative;
  border-radius: 3px;
  margin-bottom: 15px;
  border: 1px solid #dedede;
  width: 220px;
  background: #fff;
  height: 380px;
  box-sizing: border-box;
}
.b-wrap-list .no-cout {
}
.b-wrap-list .has-count {
  border: 2px solid red;
  box-shadow: #ccc 0 0 8px;
}

.b-wrap-list .pro-box .pic {
  width: 220px;
  height: 180px;
  overflow: hidden;
  text-align: center;
}
.b-wrap-list .pro-box .pic img {
  margin-top: 15px;
  max-width: 170px;
  max-height: 170px;
}
.b-wrap-list .pro-box .detail {
  margin-left: 8px;
}
.b-wrap-list .pro-box .detail > li {
  display: block;
  margin-top: 6px;
  text-align: left;
}
.b-wrap-list .pro-box .detail > li > span {
  color: #979797;
}
.b-wrap-list .pro-box .detail > li .name {
  color: #000;
  margin-left: 3px;
  line-height: 18px;
  display: inline-block;
  vertical-align: middle;
  width: 135px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.b-wrap-list .pro-box .detail > li .spec {
  display: inline-block;
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.b-wrap-list .pro-box .detail > li .dis-price {
  font-size: 18px;
  color: red;
  font-family: Arial, Helvetica, sans-serif;
}
.b-wrap-list .pro-box .detail > li .price {
  margin-left: 8px;
  text-decoration: line-through;
  font-family: Arial, Helvetica, sans-serif;
}
.b-wrap-list .pro-box .detail > li .stext {
  display: inline-block;
  vertical-align: middle;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.b-wrap-list .pro-box .botom {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #f8f8f8;
  height: 38px;
  border-top: 1px solid #dedede;
}
.b-wrap-list .pro-box .botom > div {
  margin-left: 15px;
  margin-top: 4px;
}
.b-wrap-list .pro-box .botom .clear-text {
  display: none;
  color: #9d9d9d;
  margin-left: 5px;
}
.b-wrap-list .pro-box .botom .cart {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  background: url(~@/assets/img/icon_cart_red.png) no-repeat;
}
.b-wrap-list .pro-box .botom .cart .num {
  position: absolute;
  right: -10px;
  top: -10px;
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: red;
  color: #fff;
  line-height: 20px;
  text-align: center;
}
.cart-num-edit {
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.cart-num-edit input[type="text"] {
  height: 28px;
  width: 50px;
  text-align: center;
  border: none;
  margin-top: 0.5px;
  outline: none;
}
.cart-num-edit input[type="button"] {
  color: #fff;
  width: 28px;
  height: 30px;
  border: 1px solid #e6e6e6;
  text-align: center;
  font-size: 22px;
  font-family: "宋体";
  cursor: pointer;
  margin-top: 0.5px;
}
.has {
  background-color: #4448f8;
}
.no-has {
  background-color: #dddddd;
}
.no-record {
  text-align: center;
  padding-top: 20px;
  width: 100%;
  font-size: 16px;
  height: 80px;
  color: #fff;
  border: 10px solid #dbecec;
  background: #4448f8;
  box-sizing: border-box;
}
.no-record:hover {
  background-color: #4448f8;
}
.f-btn-box2 {
  position: absolute;
  bottom: 48px;
  right: 6px;
}
.f-btn-span {
  display: inline-block;
  cursor: pointer;
  padding: 6px 8px;
  background: #0fbcbe;
  color: #fff;
}
.icon-cart {
  display: inline-block;
  cursor: pointer;
  background-color: red;
  width: 130px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  border-radius: 3px;
}
.cart_empty {
  background-color: #979797;
}
.cart_empty:hover {
  background-color: #979797 !important;
}
.icon-cart > label {
  color: #fff;
  margin-left: 8px;
}
.icon-cart > i {
  display: inline-block;
  background: url(/images/icon-cart-white.png);
  width: 13px;
  height: 13px;
}
.icon-cart:hover {
  background-color: red;
}

/deep/ .el-input-number {
  .el-input-number__increase,
  .el-input-number__increase {
    background-color: #4448f8;
    color: #ffffff;
    &.is-disabled {
      background-color: #dddddd;
    }
  }
}

/deep/ .el-checkbox-group {
  .el-checkbox__inner {
    z-index: 0;
  }
}
.left_fx {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
